<template>
  <div class="app-container">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="header-content">
       <p class="slogan">
          让选择礼物变得简单而快乐！
        </p>
        <div class="search-box">
          <el-input
              v-model="searchKeyword"
              placeholder="搜索..."
              class="search-input"
          >
            <template #append>
              <el-button icon="Search" @click="handleSearch"/>
            </template>
          </el-input>
        </div>
        <div class="user-area" v-if="!isLogin">
          <el-button type="text" @click="goToLogin">登录</el-button>
          <el-button type="text" @click="goToRegister">注册</el-button>
        </div>
        <div class="user-area" v-else>
          <el-icon><User /> </el-icon>{{user}}
          <el-button type="text" @click="handleLogout">注销</el-button>
        </div>
        <div class="admin">
          <el-button icon="tools" @click="goToAdmin"></el-button>
        </div>
      </div>
    </header>

    <!-- 分类导航栏 -->
    <nav class="category-nav">
      <div class="nav-content">
        <el-menu
            mode="horizontal"
            :router="true"
            class="nav-menu"
        >
          <el-menu-item index="/">首页</el-menu-item>

          <!-- 按收件人划分的礼物 -->
          <el-sub-menu index="1">
            <template #title>按收件人划分的礼物</template>
            <el-menu-item index="/category/recipient/friend">送朋友</el-menu-item>
            <el-menu-item index="/category/recipient/family">送家人</el-menu-item>
            <el-menu-item index="/category/recipient/colleague">送同事</el-menu-item>
          </el-sub-menu>

          <!-- 按类别划分的礼品 -->
          <el-sub-menu index="3">
            <template #title>按类别划分的礼品</template>
            <el-menu-item index="/category/type/tech">技术/极客</el-menu-item>
            <el-menu-item index="/category/type/home">家居生活</el-menu-item>
            <el-menu-item index="/category/type/creative">创意礼物</el-menu-item>
            <el-menu-item index="/category/type/toys">玩具/游戏</el-menu-item>
            <el-menu-item index="/category/type/luxury">奢华物品</el-menu-item>
            <el-menu-item index="/category/type/funny">奇葩搞怪</el-menu-item>
          </el-sub-menu>

          <!-- 更多分类 -->
          <el-sub-menu index="4">
            <template #title>价格区间</template>
            <el-menu-item index="/category/price/0-20">20元以下</el-menu-item>
            <el-menu-item index="/category/price/20-50">20-50元</el-menu-item>
            <el-menu-item index="/category/price/50-100">50-100元</el-menu-item>
            <el-menu-item index="/category/price/100+">100元以上</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </div>
    </nav>

    <!-- 主要内容区域 -->
    <main class="main-content">
      <router-view></router-view>
    </main>
  </div>
</template>

<script>
import router from "@/router";

export default {
  name: 'MainLayout',
  data() {
    return {
      isLogin: false,
      user: null,
    }
  },
  mounted() {
    this.user=localStorage.getItem("user")
    if(this.user){
      this.isLogin=true;
    }

  },
  methods:{
    handleLogout(){
      localStorage.removeItem("user")
      localStorage.removeItem("token")
      this.isLogin=false;
      this.user=null;
      router.push('/')
    }
  }
}
</script>

<script setup>
import { ref } from 'vue'
// import { useRouter } from 'vue-router'

// const router = useRouter()
const searchKeyword = ref('')
const goToAdmin = () => {
  router.push('/admin/login')
}
const handleSearch = () => {
  if (searchKeyword.value) {
    router.push({
      path: '/search',
      query: { keyword: searchKeyword.value }
    })
  }
}

const goToLogin = () => {
  router.push('/login')
}

const goToRegister = () => {
  router.push('/register')
}
</script>

<style scoped>
.header-content {
  padding-top: 10px;
  display: flex;
  align-items: center;
}

.slogan {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
  text-align: center;
  animation: textAnimation 3s infinite;
  margin-left: 600px;
  font-family:"微软雅黑","黑体","宋体";
}
.user-area {
  margin-left: 80px; /* 调整间距 */
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin {

  padding-left: 10px; /* 调整间距 */
}
.app-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.search-box {
  margin-left: 260px; /* 调整间距 */
  width: 150px;
}

.header {
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 0 50px;
  justify-content: space-between; /* 添加此行以使元素之间有间距 */
}



.category-nav {
  background-color: #fff;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav-content {
  max-width: 1200px;
  margin: 0 auto;
}

.nav-menu {
  border-bottom: none;
  justify-content: center;
}

.main-content {
  flex: 1;
  background-color: #f5f5f5;
  padding: 20px 0;
}

:deep(.el-menu--horizontal) {
  border-bottom: none;
}

:deep(.el-menu-item), :deep(.el-sub-menu__title) {
  font-size: 16px;
}

:deep(.el-sub-menu .el-menu-item) {
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  min-width: 120px;
}

:deep(.el-menu--popup) {
  min-width: 150px;
}

:deep(.el-sub-menu__title) {
  padding: 0 15px;
}

.user-area {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 100px;
}

:deep(.el-button--text) {
  color: #333;
  font-size: 14px;
}

:deep(.el-button--text:hover) {
  color: #409EFF;
}

/* 添加下拉菜单网格布局样式 */
.submenu-grid {
  display: flex;
  padding: 20px;
  min-width: 600px;
  background-color: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.submenu-column {
  flex: 1;
  padding: 0 10px;
}

:deep(.el-menu--popup) {
  display: none;  /* 隐藏默认的下拉菜单样式 */
}

:deep(.el-menu--horizontal
.el-sub-menu__popper) {
  padding: 0;
}

:deep(.submenu-column .el-menu-item) {
  height: 40px;
  line-height: 40px;
  margin: 0;
  padding: 0 20px;
  font-size: 14px;
}

:deep(.submenu-column .el-menu-item:hover) {
  background-color: #f5f7fa;
}
</style> 